{% extends 'account/base.html' %}

{% block main %}
    <div class="profile-card">
        <h3 class="profile-card-title">我的关注</h3>
        <div class="author-cards">
            {% for followed in followed_list %}
                <div class="author_card">
                    <div class="card-header">
                        <a href="#" target="_blank" class="author_pic">
                            <img src="{{ followed.avatar_url }}" alt="author_pic">
                        </a>
                        <a href="#" target="_blank" class="author_name">{{ followed.nick_name }}</a>
                    </div>
                    <div class="author_resume">{{ followed.signature }}</div>
                    <div class="author-card-info">
                        <div class="writings"><span>总篇数</span><b>{{ followed.article_list.count() }}</b></div>
                        <div class="follows"><span>粉丝</span><b>{{ followed.followers.count() }}</b></div>
                        {#只有一个取消关注#}
{#                        <a href="javascript:;" class="focus">关注</a>#}
                        <a href="javascript:;" class="focused">
                            <span class="out">已关注</span>
                            <span class="over" style="display: none">取消关注</span>
                        </a>
                    </div>
                </div>
            {% endfor %}
        </div>
        <div class="profile-pagination">
            <div id="test1"></div>
        </div>
    </div>
{% endblock %}

{% block footer_script %}
    <script>
        layui.use(['jquery'], function() {
            var $ = layui.jquery;

            $('.focused').on({
                mouseover: function() {
                    $(this).find('.out').hide();
                    $(this).find('.over').show();
                },
                mouseout: function() {
                    $(this).find('.out').show();
                    $(this).find('.over').hide();
                },
            });
        });
    </script>
{% endblock %}
